<template>
  <div class="pop">
    <div class="pop_con">
      <div class="swiper-container txt">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <p><b>时间：</b>2021年2月11日-17日</p>
            <p><b>范围：</b>湖北、湖南、河南、安徽、江西</p>
            <p>
              <b>活动规则：</b><br />
              1、参加卡罗拉家族集福活动，点击新年祈福按钮，即可随机获得3张福卡；<br />
              2、每天登录可获得1次抽卡机会，分享好友可额外获得抽卡机会；<br />
              3、集齐卡罗拉家族4张福卡，即可获得卡罗拉家族团圆奖，更有机会再享新年锦鲤大奖。
            </p>
            <p>
              <b>活动奖品：</b><br />
              <b>牛年红包奖：</b>7000个（获得任意福卡，均可随机获得现金红包）<br />

              <b>卡罗拉家族团圆奖：</b>3000个（爱奇艺或喜马拉雅月卡会员+1000元购车红包）
              <br />

              <b>10000元新年锦鲤奖：</b
              >7个（3年6次保养+新车镀晶券+原厂太阳膜+1000元维修券）
            </p>
            <p>
              <b>获取方式：</b><br />
              <b>牛年红包奖：</b>24小时内到达支付宝余额。<br />
              <b>卡罗拉家族团圆奖：</b
              >爱奇艺或喜马拉雅月卡会员将以短信的形式进行发放，1000元购车红包将存入支付宝卡包，并于3月31日前到店购买卡罗拉车型即可使用，不可叠加，过期作废。
              <br />
              <b>10000元新车锦鲤奖：</b
              >所含中奖卡券直达支付宝卡包，仅限3月31日前到店购买卡罗拉车型时方可使用，不可叠加，过期作废。
              <br />
            </p>

            <p>
              <b>注意事项：</b><br />
              1、如您参与本次活动，则视为同意将您的个人资料提交给一汽丰田厂商授权经销店，并将与您进一步沟通试驾，购车事宜。
              <br />
              2、活动期间，如存在违规行为（包括但不限于恶意套取奖励、机器舞弊、虚假交易等违法诚信原则行为），主办方可取消您的使用资格，并有权撤销相关违规奖励，必要时追究法律责任。
              <br />3、以下情况造成奖励无法正常派发，主办方不承担相关责任：<br />
            </p>

            <p class="p2"><span>·</span>中奖用户信息状态不正常<br /></p>
            <p class="p2"><span>·</span>用户未完善身份信息<br /></p>
            <p class="p2"><span>·</span>不支持的用户类型<br /></p>
            <p class="p2">
              <span>·</span>根据监管部门要求，需要用户补充身份信息才能继续操作
            </p>
            <br>
            <br>
          </div>
        </div>
        <div class="swiper-scrollbar"></div>
      </div>

      <div class="btn_close" @click="closeRule"></div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/dist/css/swiper.css";

export default {
  name: "Rule",
  props: ["cardArr"],
  methods: {
    setScroll() {
      new Swiper(".swiper-container", {
        direction: "vertical",
        freeMode: true, // 抵抗反弹
        mousewheel: true,
        observer: true, // 要加
        observeParents: true, // 要加
        slidesPerView: "auto", // 'auto'则自动根据slides的宽度来设定
        scrollbar: {
          el: ".swiper-scrollbar",
        },
      });
    },
    closeRule() {
      this.$parent.ruleShow = false;
    },
  },
  mounted() {
    this.setScroll();
  },
};
</script>

<style lang="scss">
.pop {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  overflow: scroll;
  &::before {
    width: 100%;
    height: 15rem;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    background: rgba(0, 0, 0, 0.8);
  }
  .pop_con {
    width: 7.5rem;
    height: 13.29rem;
    background: url(../assets/images/pop_rule.png) no-repeat center top / contain;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    .btn_close {
      width: 0.88rem;
      height: 0.88rem;
      position: absolute;
      top: 0;
      right: 0.15rem;
    }
    .txt {
      width: 6.15rem;
      height: 11.05rem;
      padding-right: 0.3rem;
      box-sizing: border-box;
      overflow: hidden;
      position: absolute;
      top: 1.66rem;
      left: 0.8rem;
      font-size: 0.23rem;
      line-height: 0.4rem;
      text-align: justify;
      p {
        position: relative;
        margin-bottom: 0.2rem;
        b {
          font-size: 0.26rem;
          font-weight: 600;
        }

        &.p2 {
          box-sizing: border-box;
          padding-left: 0.4rem;
          position: relative;
          margin-bottom: 0rem;
          span {
            position: absolute;
            font-size: 0.6rem;
            top: 0.02rem;
            left: 0.1rem;
          }
        }
      }
      .swiper-slide {
        height: auto;
      }
      .swiper-scrollbar {
        opacity: 1;
        width: 1px;
        background: rgba(0, 0, 0, 0.2);
        .swiper-scrollbar-drag {
          width: 0.06rem;
          left: -1px;
          border-radius: 0.03rem;
          background: rgba(0, 0, 0, 0.2);
        }
      }
    }
  }
}
</style>
